<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./resoures/element-ui/index.css">
  <!-- //引入vue.js -->
  <script src="./resoures/vue.js"></script>
  <script src="./resoures/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="./resoures/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">书城后台</el-menu-item>
      <el-menu-item index="2">用户管理</el-menu-item>
      <el-menu-item index="3">订单管理</el-menu-item>
      <el-menu-item index="4">图书管理</el-menu-item>
      <el-menu-item index="5"><a href="/index.html" target="_blank">返回主页</a></el-menu-item>
      <el-menu-item index="6">类目管理</el-menu-item>
    </el-menu>

    <div v-if="HeadIndex===1">
      书城后台欢迎你！
    </div>
    <div v-if="HeadIndex===2">
      <!-- //用户管理 -->
      <div style="z-index: 80">
        <el-table
                :data="userList"
                style="width: 100%">
          <el-table-column
                  prop="id"
                  label="用户ID">
          </el-table-column>
          <el-table-column
                  prop="username"
                  label="用户名">
          </el-table-column>
          <el-table-column
                  prop="password"
                  label="密码">
          </el-table-column>
          <el-table-column
                  prop="phone"
                  label="电话">
          </el-table-column>
          <el-table-column
                  prop="email"
                  label="邮箱">
          </el-table-column>
          <el-table-column
                  prop="address"
                  label="地址">
          </el-table-column>
          <el-table-column
                  prop="createTime"
                  label="创建时间">
          </el-table-column>
          <el-table-column
                  prop="isAdmin"
                  label="是否管理员">
          </el-table-column>
          <!-- 添加管理列 -->
          <el-table-column
                  label="用户信息操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row.id)">编辑用户信息</el-button>
              <el-button type="text" @click="handleDelete(scope.row.id)">删除用户信息</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="z-index: 99">
        <el-dialog
                title="编辑用户信息"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
          <!-- 表单部分 -->
          <el-form ref="myForm" :model="editedUser" label-width="100px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="editedUser.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="editedUser.password"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="editedUser.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="editedUser.email"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="editedUser.address"></el-input>
            </el-form-item>
            <el-form-item label="是否管理员" prop="isAdmin">
              <el-input v-model="editedUser.isAdmin"></el-input>
            </el-form-item>
          </el-form>
          <!-- 底部按钮 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSave">保存</el-button>
          </span>
        </el-dialog>
      </div>
      <div style="margin-top: 50px;">
        <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange">
      </el-pagination>
      </div>
    </div>
<!--    //订单管理-->
    <div v-if="HeadIndex===3">
      <div style="z-index: 90">
        <el-table
                :data="orderList"
                style="width: 100%">
          <el-table-column
                  prop="id"
                  label="订单号">
          </el-table-column>
          <el-table-column
                  prop="userId"
                  label="用户ID">
          </el-table-column>
          <el-table-column
                  prop="totalCount"
                  label="总数量">
          </el-table-column>
          <el-table-column
                  prop="totalAmount"
                  label="总价格">
          </el-table-column>
          <el-table-column
                  prop="status"
                  label="订单状态">
          </el-table-column>
          <el-table-column
                  prop="createTime"
                  label="创建时间">
          </el-table-column>
          <el-table-column
                  prop="updateTime"
                  label="修改时间">
          </el-table-column>
          <!-- 添加管理列 -->
          <el-table-column
                  label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEditOrder(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDeleteOrder(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 50px;">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
      <div style="z-index: 99">
        <el-dialog
                title="编辑订单状态"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
          <!-- 表单部分 -->
          <el-form ref="myForm2" :model="editedOrder" label-width="100px">
            <el-form-item label="订单状态" prop="status">
              <el-input v-model="editedOrder.status"></el-input>
            </el-form-item>
          </el-form>
          <!-- 底部按钮 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSaveOrder">保存</el-button>
          </span>
        </el-dialog>
      </div>
    </div>

    <div v-if="HeadIndex===4">
      <el-tabs type="border-card">
        <el-tab-pane label="图书管理">
          <el-table
                  ref="multipleTable"
                  :data="bookList"
                  tooltip-effect="dark"
                  style="width: 100%">
            <!--         -->
            <el-table-column
                    prop="imageName"
                    label="图片"
                    width="200">
              <template slot-scope="scope">
                <img :src="scope.row.imageName" style="width: 100%; height: auto;">
              </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="图书名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="图书ID"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="categoryId"
                    label="分类ID"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="description"
                    label="图书简介"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="图书操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 50px;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange">
            </el-pagination>
          </div>

        </el-tab-pane>
        <el-tab-pane label="添加图书">2</el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="HeadIndex===5">
      <el-tabs type="border-card">
        <el-tab-pane label="图书管理">1</el-tab-pane>
        <el-tab-pane label="添加分类">2</el-tab-pane>
        <el-tab-pane label="角色管理">3</el-tab-pane>
        <el-tab-pane label="定时任务补偿">4</el-tab-pane>
      </el-tabs>
    </div>
  </div>

  
</body>
<script>
  var vm = new Vue({
    el:'#app',
    data() {
      return {
        activeIndex: '1',
        currentPage:1,
        total:10,
        HeadIndex:1,
        pageSize:10,
        //用户列表
        userList:[],
        //用户表单开关
        dialogVisible: false, // 对话框可见性
        editedUser: {},
        //订单------------------------------------------------
        orderList:[],
        //修改的当前订单
        editedOrder:{},
        //图书-----------------------------------------------
        bookList:[],
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        this.HeadIndex = parseInt(key);
        console.log(this.HeadIndex);
        if (this.HeadIndex === 2) {
          this.currentPage = 1;
          this.searchUserList();
        }else if (this.HeadIndex ===3){
          this.currentPage = 1;
          this.searchOrderList();
        }else if (this.HeadIndex ===4){
          this.currentPage = 1;
          this.searchBookList();
        }
      },
      //页码改变
      handleCurrentChange(page) {
        this.currentPage = page;
        // 当前页码改变时重新获取数据
        if (this.HeadIndex === 2) {
          this.searchUserList();
        }else if (this.HeadIndex ===3) {
          this.searchOrderList();
        }else if(this.HeadIndex ==4 ){
          this.searchBookList();
        }
      },
      searchUserList(){
        let _this = this;
        axios.get("http://localhost:8081/searchuserlist", {
            params: {
            currentPage: _this.currentPage,
            pageSize: _this.pageSize
            }
        })
        .then(function (response) {
          // 处理成功响应
          console.log(response.data);
          _this.userList = response.data.userList;
          _this.total = response.data.size;

        })
        .catch(function (error) {
          // 处理错误
          console.error(error);
        });
        },
      handleClose(done) {
        // 可以在这里处理对话框关闭前的逻辑
        // 如果需要阻止对话框关闭，可以调用 done(false)
        // 否则调用 done() 即可关闭对话框
        done();
      },
      //点击编辑
      handleEdit(id) {
        // 当用户点击编辑时，将正在编辑的用户信息复制到 editedUser 对象中
        // this.editedUser = row;
        this.dialogVisible = true; // 打开对话框
        this.editedUser.id = id;
        console.log((this.dialogVisible))
        console.log("编辑后id:");
        console.log(id);
        // this.handleSave(id);
      },
      openSucess() {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      },
      openDelete() {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      },
      //修改用户信息 表单
      handleSave() {
          // 通过引用表单的 $refs 属性来获取表单数据
          // const formData = this.$refs.myForm.editedUser;
        console.log(this.editedUser.id)
        console.log(this.editedUser)
        // 在这里执行保存操作，您可以将 formData 发送到后端等
        // ...
        // 发送POST请求到后端接口
        let _this = this;
        axios.post('http://localhost:8081/adminupdateuser', this.editedUser)
                .then(response => {
                  // 请求成功处理
                  console.log('后端返回的数据:', response.data.code);
                  // 在这里执行其他操作，例如更新UI等
                  if (response.data.code ===1){
                    _this.openSucess();
                    _this.searchUserList();
                  }else {
                    alert("未更新")
                  }
                })
                .catch(error => {
                  // 请求失败处理
                  console.error('请求错误:', error);
                  // 在这里执行错误处理，例如显示错误消息等
                });
        // 关闭对话框
        this.dialogVisible = false;
      },
      //删除用户信息
      handleDelete(id){
        let _this = this;
        console.log(id);
        axios.get('http://localhost:8081/admindeleteuser', {
          params: {
            id: id
          }
        }).then(response => {
                  // 请求成功处理
                  console.log('后端返回的数据:', response.data);
                  // 在这里执行其他操作，例如更新UI等
                  if (response.data.code === 1) {
                    _this.openSucess(); // 确保方法名正确
                    _this.searchUserList();
                  } else {
                    alert("未更新");
                  }
                })
                .catch(error => {
                  // 请求失败处理
                  console.error('请求错误:', error);
                  // 在这里执行错误处理，例如显示错误消息等
                });
      },
      handleCancel() {
        // 取消操作，关闭对话框
        this.dialogVisible = false;
      },

    //  --------------------------------------------------------------------------
    //订单
      searchOrderList(){
        let _this = this;
        axios.get("http://localhost:8081/searchorderlist", {
          params: {
            currentPage: _this.currentPage,
            pageSize: _this.pageSize
          }
        }).then(function (response) {
            // 处理成功响应
            console.log(response.data);
            _this.orderList = response.data.orderList;
            _this.total = response.data.size;
          })
          .catch(function (error) {
            // 处理错误
            console.error(error);
          });
      },
      //修改订单状态
      handleEditOrder(id){
        this.dialogVisible = true; // 打开对话框
        this.editedOrder = id;
        // console.log(this.editedOrder);

      },
      //删除订单
      handleDeleteOrder(id){
        console.log(id);
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/admindeleteorder", {
          params: {
            orderId: id,
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.searchOrderList();
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
      //保存订单
      handleSaveOrder(){
        console.log(this.editedOrder.status)
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/adminupdateorder", {
          params: {
            orderId: _this.editedOrder.id,
            status:_this.editedOrder.status
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.dialogVisible = false;
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
    // ---------------------------------------------------------------------------
      //图书管理
      searchBookList(){
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/adminbooklist", {
          params: {
            currentPage: _this.currentPage,
            pageSize: _this.pageSize
          }
        }).then(function (response) {
          // 请求成功处理
          _this.bookList = response.data.bookList;
          _this.total = response.data.total
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      }

    },
    mounted(){
      console.log(this.HeadIndex)
    }
  })
</script>
</html>